<!DOCTYPE html>
<html>
<head>
	<title>{% block title %}{% endblock %}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body class="mb-3">
    <nav>
        <ul class="nav justify-content-end bg-dark-subtle">
            <li class="nav-item">
                <a class="nav-link active" href="{% url 'pfl-list' %}">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'pfl-create' %}">Add Portfolio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'logout' %}">Log out</a>
            </li>
        </ul>
    </nav>

    <div class="container-fluid">
        <img src="https://cdn-icons-png.flaticon.com/512/552/552721.png" style="height: 25px;width: 25px;">
        <span class="fs-5">{{request.user}}</span>
    </div>

    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>